<!DOCTYPE HTML>
<html xmlns:th="www.thymeleaf.org">

	<head>
		<title>尤洪后台管理</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Novus Admin Panel Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>
		<!-- Bootstrap Core CSS -->
		<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
		<!-- Custom CSS -->
		<link href="css/style.css" rel='stylesheet' type='text/css' />
		<!-- font CSS -->
		<!-- font-awesome icons -->
		<link href="css/font-awesome.css" rel="stylesheet">
		<!-- //font-awesome icons -->
		<!-- js-->
		<script src="js/jquery-1.11.1.min.js"></script>
		<script src="js/modernizr.custom.js"></script>
		<!--webfonts-->
		<link href='http://fonts.useso.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
		<!--//webfonts-->
		<!--animate-->
		<link href="css/animate.css" rel="stylesheet" type="text/css" media="all">
		<script src="js/wow.min.js"></script>
		<script>
			new WOW().init();
		</script>
		<!--//end-animate-->
		<!-- chart -->
		<script src="js/Chart.js"></script>
		<!-- //chart -->
		<!--Calender-->
		<link rel="stylesheet" href="css/clndr.css" type="text/css" />
		<script src="js/underscore-min.js" type="text/javascript"></script>
		<script src="js/moment-2.2.1.js" type="text/javascript"></script>
		<script src="js/clndr.js" type="text/javascript"></script>
		<script src="js/site.js" type="text/javascript"></script>
		<!--End Calender-->
		<!-- Metis Menu -->
		<script src="js/metisMenu.min.js"></script>
		<script src="js/custom.js"></script>
		<script src="ckeditor/ckeditor.js"></script>
		<link href="css/custom.css" rel="stylesheet">
		<!--//Metis Menu -->
	</head>

	<body class="cbp-spmenu-push">
		<div class="main-content">
			<!--left-fixed -navigation-->
			<div class=" sidebar" role="navigation">
				<div class="navbar-collapse">
					<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
						<ul class="nav" id="side-menu">
							<li>
								<a href="index.html" class="active"><i class="fa fa-home nav_icon"></i>首页</a>
							</li>
							<!-- 商家 -->
							<li>
								<a href="#"><i class="fa fa-cogs nav_icon"></i>商品管理 <span class="fa arrow"></span></a>
								<ul class="nav nav-second-level collapse">
									<li>
										<a href="grids.html">添加商品</a>
									</li>
									<li>
										<a href="media.html">查看商品</a>
									</li>
								</ul>
								<!-- /nav-second-level -->
							</li>
							<li>
								<a href="#"><i class="fa fa-cogs nav_icon"></i>订单管理 <span class="fa arrow"></span></a>
								<ul class="nav nav-second-level collapse">
									<li>
										<a href="media.html">查看订单</a>
									</li>
								</ul>
								<!-- /nav-second-level -->
							</li>
							<!-- 此功能商家/管理员都有 -->
							<li>
								<a href="#"><i class="fa fa-bar-chart nav_icon"></i>财务报表 </a>
							</li>
							<li>
								<!-- 商家专属 -->
								<a href="#">
									<i class="fa fa-envelope nav_icon"></i>网站公告
									<!-- 8 代表着有 8 个公告 -->
									<span class="nav-badge-btm">8</span>
								</a>
							</li>
							<!-- //商家 -->

							<!-- 管理员 -->
							<li>
								<a href="#"><i class="fa fa-cogs nav_icon"></i>分类管理 <span class="fa arrow"></span></a>
								<ul class="nav nav-second-level collapse">
									<li>
										<a href="media.html">添加分类</a>
										<a href="media.html">查看分类</a>
									</li>
								</ul>
								<!-- /nav-second-level -->
							</li>
							<li>
								<!-- 若违规，封禁后，向商家发送通知邮件让商家修改或下架此商品 -->
								<a href="#"><i class="fa fa-bar-chart nav_icon"></i>商品管理 </a>
							</li>
							<li>
								<!-- 查看/审核/封禁商家 -->
								<a href="#"><i class="fa fa-bar-chart nav_icon"></i>商家管理 </a>
							</li>
							<li>
								<!-- 查看/封禁会员 -->
								<a href="#"><i class="fa fa-bar-chart nav_icon"></i>会员管理 </a>
							</li>
							<li>
								<a href="#"><i class="fa fa-cogs nav_icon"></i>管理员管理 <span class="fa arrow"></span></a>
								<ul class="nav nav-second-level collapse">
									<li>
										<a href="media.html">添加管理员</a>
										<a href="media.html">查看管理员</a>
									</li>
								</ul>
								<!-- /nav-second-level -->
							</li>
							<li>
								<!-- 管理员专属 -->
								<a href="#"><i class="fa fa-cogs nav_icon"></i>网站公告 <span class="fa arrow"></span></a>
								<ul class="nav nav-second-level collapse">
									<li>
										<a href="media.html">新增公告</a>
										<a href="media.html">查看公告</a>
									</li>
								</ul>
								<!-- /nav-second-level -->
							</li>

							<!-- //管理员 -->
						</ul>
						<!-- //sidebar-collapse -->
					</nav>
				</div>
			</div>
			<!--left-fixed -navigation-->
			<!-- header-starts -->
			<div class="sticky-header header-section ">
				<div class="header-left">
					<!--toggle button start-->
					<button id="showLeftPush"><i class="fa fa-bars"></i></button>
					<!--toggle button end-->
					<!--logo -->
					<div class="logo">
						<a href="index.html">
							<h1>尤洪商城</h1>
							<span>后 台 管 理</span>
						</a>
					</div>
					<!--//logo-->
					<!--search-box-->
					<div class="search-box">
						<form class="input">
							<input class="sb-search-input input__field--madoka" placeholder="查找..." type="search" id="input-31" />
							<label class="input__label" for="input-31">
							<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
								<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
							</svg>
						</label>
						</form>
					</div>
					<!--//end-search-box-->
					<div class="clearfix"> </div>
				</div>
				<div class="header-right">
					<div class="profile_details_left">
						<!--notifications of menu start -->
						<ul class="nofitications-dropdown">
							<li class="dropdown head-dpdn">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
									<i class="fa fa-envelope"></i>
									<span class="badge">3</span></a>
								<!-- 未读数量 -->
								<ul class="dropdown-menu">
									<li>
										<div class="notification_header">
											<h3>你有3封未读邮件...</h3>
										</div>
									</li>
									<li>
										<a href="#">
											<div class="user_img"><img src="images/1.png" alt=""></div>
											<div class="notification_desc">
												<p>管理解决下我的问题</p>
												<p><span>1 小时前</span></p>
											</div>
											<div class="clearfix"></div>
										</a>
									</li>
									<li class="odd">
										<a href="#">
											<div class="user_img"><img src="images/2.png" alt=""></div>
											<div class="notification_desc">
												<p>管理解决下我的问题</p>
												<p><span>1 小时前</span></p>
											</div>
											<div class="clearfix"></div>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="user_img"><img src="images/3.png" alt=""></div>
											<div class="notification_desc">
												<p>管理解决下我的问题</p>
												<p><span>1 小时前</span></p>
											</div>
											<div class="clearfix"></div>
										</a>
									</li>
									<li>
										<div class="notification_bottom">
											<a href="#">查看更多邮件...</a>
										</div>
									</li>
								</ul>
							</li>
							<li class="dropdown head-dpdn">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
									<i class="fa fa-bell"></i>
									<span class="badge blue">3</span></a>
								<!-- 未读数量 -->
								<ul class="dropdown-menu">
									<li>
										<div class="notification_header">
											<h3>你有3个未读通知.../h3>
									</div>
								</li>
								<li><a href="#">
									<div class="user_img"><img src="images/2.png" alt=""></div>
								   <div class="notification_desc">
									<p>这个东西我们要这么做...</p>
									<p><span>1 小时前</span></p>
									</div>
								  <div class="clearfix"></div>	
								 </a></li>
								 <li class="odd"><a href="#">
									<div class="user_img"><img src="images/1.png" alt=""></div>
								   <div class="notification_desc">
									<p>这个东西我们要这么做...</p>
									<p><span>1 小时前</span></p>
									</div>
								   <div class="clearfix"></div>	
								 </a></li>
								 <li><a href="#">
									<div class="user_img"><img src="images/3.png" alt=""></div>
								   <div class="notification_desc">
									<p>这个东西我们要这么做...</p>
									<p><span>1 小时前</span></p>
									</div>
								   <div class="clearfix"></div>	
								 </a></li>
								 <li>
									<div class="notification_bottom">
										<a href="#">查看更多通知...</a>
									</div> 
								</li>
							</ul>
						</li>
						<!-- 如果登录用户是商家则显示 -->
						<li class="dropdown head-dpdn">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
							<i class="fa fa-tasks"></i>
							<span class="badge blue1">8</span></a><!-- 未读数量 -->
							<ul class="dropdown-menu">
								<li>
									<div class="notification_header">
										<h3>你有8个订单待处理...</h3>
										</div>
									</li>
									<li>
										<a href="#">
											<div class="task-info">
												<span class="task-desc">Database update</span><span class="percentage">40%</span>
												<div class="clearfix"></div>
											</div>
											<div class="progress progress-striped active">
												<div class="bar yellow" style="width:40%;"></div>
											</div>
										</a>
									</li>
								</ul>
							</li>
						</ul>
						<div class="clearfix"> </div>
					</div>
					<!--notification menu end -->
					<div class="profile_details">
						<ul>
							<li class="dropdown profile_details_drop">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
									<div class="profile_img">
										<span class="prfil-img"><img src="images/a.png" alt=""> </span>
										<div class="user-name">
											<p>小张</p>
											<span>管理员</span>
											<!-- 管理员或商家 -->
										</div>
										<i class="fa fa-angle-down lnr"></i>
										<i class="fa fa-angle-up lnr"></i>
										<div class="clearfix"></div>
									</div>
								</a>
								<ul class="dropdown-menu drp-mnu">
									<!--<li> <a href="#"><i class="fa fa-cog"></i> 设置</a> </li>-->
									<!-- 设置 -->
									<li>
										<a href="#"><i class="fa fa-user"></i> 个人信息</a>
									</li>
									<li>
										<a href="#"><i class="fa fa-sign-out"></i> 登出</a>
									</li>
								</ul>
							</li>
						</ul>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<!-- //header-ends -->
			<!-- main content start-->
			<div id="page-wrapper">
				<div class="main-page" th:fragment="productAdd">
					<div class="row">
						<h3 class="title1" th:if="${product==null}">添加商品:</h3>
						<h3 class="title1" th:if="${product!=null}">修改商品:</h3>
						<div class="form-three widget-shadow" id="addproductdiv">
						
						<!-- 添加商品 -->
							<form th:if="${product==null}" class="form-horizontal" action="addProduct.do" method="post"  id="addProduct"  enctype="multipart/form-data">
								
								<div class="form-group">
									<label for="focusedinput" class="col-sm-2 control-label">商品类别</label>
									<div class="col-sm-8">
										<!--大类型显示  设置点击事件，点击之后在其后显示对应的商品小类别的下拉框-->
										<select class="input-sm"  id="bigtype"  >
											<option   th:each="big:${bigtype}" th:value="${big.id}"  th:text="${big.name}">女装</option>
										</select>
										<script type="text/javascript">
										$("#bigtype").change(function(){
											var id=$(this).children('option:selected').val()
											$('#smalltype').load('findsmallType.do',{bigType:id},function(){});
										});
										</script>
										&nbsp;
										<!-- 小类型下拉框   设置点击事件，选择之后 -->
										<select class="input-sm" th:if="${smalltype != null}" id="smalltype" name="smallid" th:fragment="smallTypeSelect">
											<option  th:each="small:${smalltype}" th:value="${small.id}" th:text="${small.name}">羽绒服</option>
										</select>
										<select class="input-sm" th:if="${smalltype == null}" id="smalltype"  name="smallid"  th:fragment="smallTypeSelect">
											<option  value="0" >请选择大类型</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label for="disabledinput" class="col-sm-2 control-label">商品名称</label>
									<div class="col-sm-8" th:if="${product==null}">
										<input  type="text" class="form-control1 productName" name="listName" placeholder="商品名称" >
									</div>
									<div class="col-sm-8" th:if="${product!=null}">
										<input th:value="${product.name}" type="text" class="form-control1 productName" name="listName"  placeholder="商品名称" >
										<input th:value="${product.id}" name="id" style="display: none"  id="productid">
									</div>
								</div>
								<div class="form-group" id="specs-list" th:if="${splist ne null and splist.size() gt 0}">
									<!-- 商品价格：不同型号的商品有着不同的价格，有着不同的数量 -->
									<label for="disabledinput" class="col-sm-2 control-label"  style="float: left ; margin-left: 1px">商品规格</label>
									<div>
										<div th:if="${splist!=null}" th:each="sp,spStat:${splist}" class="col-sm-8" th:id="'specs-list'+${spStat.count}"  style="margin-left: 16.65%; margin-top: 10px;" >
											<span class="specs-num" th:text="${spStat.count}">1</span>
											<input  th:value="${sp.name}" type="text" class="form-control productSpecsName"  id="shopSpec"   style="width: 20%; display: inline-block;"                                 name="listSpecs" placeholder="商品规格" value="" required="required">&nbsp;&nbsp;
											<input  th:value="${sp.productNum}" type="number" min="0"   id="shopNum"   class="form-control  productSpecsNum"  style="width: 15%; display: inline-block;"                   name="listNum" placeholder="数量" value="" required="required" >&nbsp;&nbsp;
											<input  th:value="${sp.productPrice}" type="number" min="0.00"  id="shopPrice"  step="0.01" class="form-control  productSpecsPrice" style="width: 15%; display: inline-block;" name="listPrice" placeholder="价格" value=""  required="required">&nbsp;
											
											<a th:if="${spStat.count lt splist.size()}" th:class="'specs-list-reduce'+${spStat.count}" href="javascript:void(0)" th:onclick="'reduceSpecsList('+${spStat.count}+')'" style="background-image: url(images/reduce.svg);display:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
											<a th:if="${spStat.count lt splist.size()}" th:class="'specs-list-plus'+${spStat.count}" href="javascript:void(0)" onclick="addSpecsList()" style="background-image: url(images/plus.svg);display:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
											
											<a th:if="${spStat.count eq splist.size()}" th:class="'specs-list-reduce'+${spStat.count}" href="javascript:void(0)" th:onclick="'reduceSpecsList('+${spStat.count}+')'" style="background-image: url(images/reduce.svg)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
											<a th:if="${spStat.count eq splist.size()}" th:class="'specs-list-plus'+${spStat.count}" href="javascript:void(0)" onclick="addSpecsList()" style="background-image: url(images/plus.svg);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
										</div>
									</div>
								</div>
								<div class="form-group" id="specs-list" th:if="${splist eq null or splist.size() eq 0}"  >
									<!-- 商品价格：不同型号的商品有着不同的价格，有着不同的数量 -->
									<label for="disabledinput" class="col-sm-2 control-label">商品规格</label>
									<div class="col-sm-8" id="specs-list1" >
										<span class="specs-num">1</span>
										<input  type="text" class="form-control productSpecsName"  id="shopSpec"   style="width: 20%; display: inline-block;"  name="listSpecs" placeholder="商品规格" value="" required="required">&nbsp;&nbsp;
										<input  type="number" min="0"   id="shopNum"   class="form-control  productSpecsNum"  style="width: 15%; display: inline-block;" name="listNum"  placeholder="数量" value="" required="required" >&nbsp;&nbsp;
										<input  type="number" min="0.0"  id="shopPrice"  step="0.1" class="form-control  productSpecsPrice" style="width: 15%; display: inline-block;" name="listPrice"  placeholder="价格" value=""  required="required">&nbsp;
										<a class="specs-list-reduce1" href="javascript:void(0)" th:onclick="reduceSpecsList(1)" style="background-image: url(images/reduce.svg)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
										<a class="specs-list-plus1" href="javascript:void(0)" onclick="addSpecsList()" style="background-image: url(images/plus.svg);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
									</div>
								</div>
								<script th:inline="javascript">
									var specsNum = 1;
									var splist = [[${splist}]]
									if(splist != null){
										specsNum=splist.length+1;
									}
									// 添加规格input组
									function addSpecsList(){
										
										$('#specs-list'+specsNum+' .specs-list-plus'+specsNum).css('display','none');
										$('#specs-list'+specsNum+' .specs-list-reduce'+specsNum).css('display','none');
										specsNum = specsNum + 1;
										var specsContent = '<div class="col-sm-8" style="margin-left: 16.65%; margin-top: 10px;" id="specs-list'+specsNum+'">'
													+'<span class="specs-num">'+specsNum+'</span> '
													+'<input type="text" class="form-control productSpecsName" style="width: 20%; display: inline-block;"name="listSpecs" placeholder="商品规格" value="" required>&nbsp;&nbsp;&nbsp;'
													+'<input type="number" class="form-control productSpecsNum" style="width: 15%; display: inline-block;" name="listNum" placeholder="数量" value="" required>&nbsp;&nbsp;&nbsp;'
													+'<input type="number" min="0.0" step="0.1" class="form-control productSpecsPrice" style="width: 15%; display: inline-block;" name="listPrice" placeholder="价格" value="" required>&nbsp;'
													+'<a class="specs-list-reduce'+specsNum+'" href="javascript:void(0)" onclick="reduceSpecsList('+specsNum+')" style="background-image: url(images/reduce.svg)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'
													+'<a class="specs-list-plus'+specsNum+'" href="javascript:void(0)" onclick="addSpecsList()" style="background-image: url(images/plus.svg);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'
													+'</div>';
										$('#specs-list').append(specsContent);
									}
									
									// 删除规格input组
									function reduceSpecsList(num){
										if(num == 1){
											var specsListContent = $('#specs-list'+num+' input').val();
											
											if(specsListContent != null || specsListContent != ''){
												$('#specs-list'+num+' input').val('');
												return;
											}else{
												return;
											}
										}
										$('#specs-list'+num).remove();
										specsNum --;
										$('#specs-list'+specsNum+' .specs-list-plus'+specsNum).css('display','inline');
										$('#specs-list'+specsNum+' .specs-list-reduce'+specsNum).css('display','inline');
									} 
								</script>
								<div class="form-group">
									<label for="disabledinput" class="col-sm-2 control-label">商品优惠</label>
									
									<div class="col-sm-8" th:if="${product==null}">
										<input required="required" type="number" min="0.1" max="1.0" step="0.1" class="form-control" style="width: 15%;" name="listDiscount" placeholder="整体优惠" value=""  id="Discount">&nbsp;&nbsp;
									</div>
								</div>
								
								<div class="form-group" id="image-list" th:if="${image eq null or image.size() eq 0}">
									<label for="disabledinput" class="col-sm-2 control-label" >商品图片</label>
									<div class="col-sm-8" id="image-list1" >
										<span class="image-num">1</span>.
										<!-- 这里和商品规格类似 -->
										<input   type="file"  class="form-control  productSpecsImage" style="width: 30%; display: inline-block;" name="file" value=""   required="required">&nbsp;&nbsp;
										<a class="image-list-reduce1" href="javascript:void(0)" onclick="reduceImageList(1)" style="background-image: url(images/reduce.svg)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
										<a class="image-list-plus1" href="javascript:void(0)" onclick="addImageList()" style="background-image: url(images/plus.svg);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
									</div>
									
								</div>
								
								<script th:inline="javascript">
									var imageNum = 1;// 添加图片上传input
									var image = [[${image}]]
									
									
									console.log(image);
									if(image != null){
										imageNum = image.length;
									}
									function addImageList(){
										$('#image-list'+imageNum+' .image-list-plus'+imageNum).css('display','none');
										$('#image-list'+imageNum+' .image-list-reduce'+imageNum).css('display','none');
										imageNum = imageNum + 1;
										var imageContent = '<div class="col-sm-8" style="margin-left: 16.65%; margin-top: 10px;" id="image-list'+imageNum+'">'
													+'<span class="image-num">'+imageNum+'</span>. '
													+'<input type="file"  class="form-control  productSpecsImage" style="width: 30%; display: inline-block;" name="file" value="" required>&nbsp;&nbsp;'
													+'<a class="image-list-reduce'+imageNum+'" href="javascript:void(0)" onclick="reduceImageList('+imageNum+')" style="background-image: url(images/reduce.svg)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'
													+'<a class="image-list-plus'+imageNum+'" href="javascript:void(0)" onclick="addImageList()" style="background-image: url(images/plus.svg);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'
													+'</div>';
										$('#image-list').append(imageContent);
									}
									
									// 删除图片上传input
									function reduceImageList(num){
										if(num == 1){
											var imageListContent = $('#image-list'+num+' input').val();
											
											if(imageListContent != null || imageListContent != ''){
												$('#image-list'+num+' input').val('');
												return;
											}else{
												return;
											}
										}
										$('#image-list'+num).remove();
										imageNum --;
										$('#image-list'+imageNum+' .image-list-plus'+imageNum).css('display','inline');
										$('#image-list'+imageNum+' .image-list-reduce'+imageNum).css('display','inline');
									}
								</script>
								<div class="form-group">
									<label for="disabledinput" class="col-sm-2 control-label">商品描述</label>
									<div class="col-sm-8">
										<textarea id="description" name="description" style="height: 350px;"   required="required"></textarea>
										<script th:inline="javascript">
										var product = [[${product}]]
										var obj =CKEDITOR.replace('description');
										if(product != null){
											console.log(product)
											obj.setData(product.descriptioin);
										}
										
										</script>
										<script>
										//添加商品
										$(function(){
											$(".form-horizontal").submit(function(){     // 提交表单的id
												var options ={
									        			dataType: 'json',
									        			success: function(data){
									        				if(data.sucess==0){
									    	                	$('#tipContent').html(data.message);
									    	                	$("#asdf").trigger('click');
									    	                }else if(data.sucess==1){
									    	                	$(' #addProduct' ). each(function() {
									    	                		this.reset(); //将表单的元素恢复初始化
									    	                		//清空所有ckeditor .
									    	                		for (instance in CKEDITOR.instances)
									    	                		CKEDITOR.instances[instance].setData("");
									    	                		});

									    	                }
									        				
									        			}
									        	};
												for(instance in CKEDITOR.instances)
													CKEDITOR.instances[instance].updateElement();
												$('#addProduct').ajaxSubmit(options);
										        return false;   //防止表单自动提交
										    });
										});
									
										</script>
									</div>
								</div>
								<button th:if="${splist==null}" href="javascript:void(0)"   style="margin-left: 74.5%; font-size: x-large;">
									上架商品
								</button>
								
							</form>
							
							<!-- 修改 -->
							<form th:if="${product!=null}" class="form-horizontal" action="ModifyProduct.do" method="post"  id="ModifyProduct"  enctype="multipart/form-data">	
								<div class="form-group">
									<label for="focusedinput" class="col-sm-2 control-label">商品类别</label>
									<div class="col-sm-8">
										<!--大类型显示  设置点击事件，点击之后在其后显示对应的商品小类别的下拉框-->
										<select class="input-sm"  id="bigtype"  >
											<option   th:each="big:${bigtype}" th:value="${big.id}"  th:text="${big.name}">女装</option>
										</select>
										<script type="text/javascript">
										$("#bigtype").change(function(){
											var id=$(this).children('option:selected').val()
											$('#smalltype').load('findsmallType.do',{bigType:id},function(){});
										});
										</script>
										&nbsp;
										<!-- 小类型下拉框   设置点击事件，选择之后 -->
										<select class="input-sm" th:if="${smalltype != null}" id="smalltype" name="smallid" th:fragment="smallTypeSelect">
											<option  th:each="small:${smalltype}" th:value="${small.id}" th:text="${small.name}">羽绒服</option>
										</select>
										<select class="input-sm" th:if="${smalltype == null}" id="smalltype"  name="smallid"  th:fragment="smallTypeSelect">
											<option  value="0" >请选择大类型</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label for="disabledinput" class="col-sm-2 control-label">商品名称</label>
									<div class="col-sm-8" th:if="${product==null}">
										<input  type="text" class="form-control1 productName" name="listName" placeholder="商品名称" >
									</div>
									<div class="col-sm-8" th:if="${product!=null}">
										<input th:value="${product.name}" type="text" class="form-control1 productName" name="listName"  placeholder="商品名称" >
										<input th:value="${product.id}" name="id" style="display: none"  id="productid">
									</div>
								</div>
								<div class="form-group" id="specs-list" th:if="${splist ne null and splist.size() gt 0}">
									<!-- 商品价格：不同型号的商品有着不同的价格，有着不同的数量 -->
									<label for="disabledinput" class="col-sm-2 control-label"  style="float: left ; margin-left: 1px">商品规格</label>
									<div>
										<div th:if="${splist!=null}" th:each="sp,spStat:${splist}" class="col-sm-8" th:id="'specs-list'+${spStat.count}"  style="margin-left: 16.65%; margin-top: 10px;" >
											<span class="specs-num" th:text="${spStat.count}">1</span>
											<input  th:value="${sp.name}" type="text" class="form-control productSpecsName"  id="shopSpec"   style="width: 20%; display: inline-block;"                                 name="listSpecs" placeholder="商品规格" value="" required="required">&nbsp;&nbsp;
											<input  th:value="${sp.productNum}" type="number" min="0"   id="shopNum"   class="form-control  productSpecsNum"  style="width: 15%; display: inline-block;"                   name="listNum" placeholder="数量" value="" required="required" >&nbsp;&nbsp;
											<input  th:value="${sp.productPrice}" type="number" min="0.0"  id="shopPrice"  step="0.1" class="form-control  productSpecsPrice" style="width: 15%; display: inline-block;" name="listPrice" placeholder="价格" value=""  required="required">&nbsp;
											
											<a th:if="${spStat.count lt splist.size()}" th:class="'specs-list-reduce'+${spStat.count}" href="javascript:void(0)" th:onclick="'reduceSpecsList('+${spStat.count}+')'" style="background-image: url(images/reduce.svg);display:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
											<a th:if="${spStat.count lt splist.size()}" th:class="'specs-list-plus'+${spStat.count}" href="javascript:void(0)" onclick="addSpecsList()" style="background-image: url(images/plus.svg);display:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
											
											<a th:if="${spStat.count eq splist.size()}" th:class="'specs-list-reduce'+${spStat.count}" href="javascript:void(0)" th:onclick="'reduceSpecsList('+${spStat.count}+')'" style="background-image: url(images/reduce.svg);display: inline;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
											<a th:if="${spStat.count eq splist.size()}" th:class="'specs-list-plus'+${spStat.count}" href="javascript:void(0)" onclick="addSpecsList()" style="background-image: url(images/plus.svg);display: inline;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
										
											<a th:if="${splist.size()==0}" th:class="'specs-list-reduce'+${spStat.count}" href="javascript:void(0)" th:onclick="'reduceSpecsList('+${spStat.count}+')'" style="background-image: url(images/reduce.svg);display: block;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
											<a th:if="${splist.size()==0}" th:class="'specs-list-plus'+${spStat.count}" href="javascript:void(0)" onclick="addSpecsList()" style="background-image: url(images/plus.svg);display: block;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
										
										</div>
									</div>
								</div>
								<div class="form-group" id="specs-list" th:if="${splist eq null or splist.size() eq 0}"  >
									<!-- 商品价格：不同型号的商品有着不同的价格，有着不同的数量 -->
									<label for="disabledinput" class="col-sm-2 control-label">商品规格</label>
									<div class="col-sm-8" id="specs-list1" >
										<span class="specs-num">1</span>
										<input  type="text" class="form-control productSpecsName"  id="shopSpec"   style="width: 20%; display: inline-block;"  name="listSpecs" placeholder="商品规格" value="" required="required">&nbsp;&nbsp;
										<input  type="number" min="0"   id="shopNum"   class="form-control  productSpecsNum"  style="width: 15%; display: inline-block;" name="listNum"  placeholder="数量" value="" required="required" >&nbsp;&nbsp;
										<input  type="number" min="0.00"  id="shopPrice"  step="0.01" class="form-control  productSpecsPrice" style="width: 15%; display: inline-block;" name="listPrice"  placeholder="价格" value=""  required="required">&nbsp;
										<a class="specs-list-reduce1" href="javascript:void(0)" th:onclick="reduceSpecsList(1)" style="background-image: url(images/reduce.svg)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
										<a class="specs-list-plus1" href="javascript:void(0)" onclick="addSpecsList()" style="background-image: url(images/plus.svg);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
									</div>
								</div>
								<script th:inline="javascript">
									var specsNum = 1;
									var splist = [[${splist}]]
									if(splist != null){
										specsNum=splist.length;
									}
									// 添加规格input组
									function addSpecsList(){
										
										$('#specs-list'+specsNum+' .specs-list-plus'+specsNum).css('display','none');
										$('#specs-list'+specsNum+' .specs-list-reduce'+specsNum).css('display','none');
										specsNum = specsNum + 1;
										var specsContent = '<div class="col-sm-8" style="margin-left: 16.65%; margin-top: 10px;" id="specs-list'+specsNum+'">'
													+'<span class="specs-num">'+specsNum+'</span>. '
													+'<input type="text" class="form-control productSpecsName" style="width: 20%; display: inline-block;"name="listSpecs" placeholder="商品规格" value="" required>&nbsp;&nbsp;&nbsp;'
													+'<input type="number" class="form-control productSpecsNum" style="width: 15%; display: inline-block;" name="listNum" placeholder="数量" value="" required>&nbsp;&nbsp;&nbsp;'
													+'<input type="number" min="0.0" step="0.1" class="form-control productSpecsPrice" style="width: 15%; display: inline-block;" name="listPrice" placeholder="价格" value="" required>&nbsp;'
													+'<a class="specs-list-reduce'+specsNum+'" href="javascript:void(0)" onclick="reduceSpecsList('+specsNum+')" style="background-image: url(images/reduce.svg)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'
													+'<a class="specs-list-plus'+specsNum+'" href="javascript:void(0)" onclick="addSpecsList()" style="background-image: url(images/plus.svg);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'
													+'</div>';
										$('#specs-list').append(specsContent);
									}
									
									// 删除规格input组
									function reduceSpecsList(num){
										if(num == 1){
											var specsListContent = $('#specs-list'+num+' input').val();
											
											if(specsListContent != null || specsListContent != ''){
												$('#specs-list'+num+' input').val('');
												return;
											}else{
												return;
											}
										}
										$('#specs-list'+num).remove();
										specsNum --;
										console.log(specsNum)
										$('#specs-list'+specsNum+' .specs-list-plus'+specsNum).css('display','inline');
										$('#specs-list'+specsNum+' .specs-list-reduce'+specsNum).css('display','inline');
									} 
								</script>
								<div class="form-group">
									<label for="disabledinput" class="col-sm-2 control-label">商品优惠</label>
									<div class="col-sm-8" th:if="${product!=null}">
										<input th:value="${product.discount}" required="required" type="number" min="0.01" max="1.00" step="0.01" class="form-control" style="width: 15%;" name="listDiscount" placeholder="整体优惠" value=""  id="Discount">&nbsp;&nbsp;
									</div>
									
								</div>
							
								<div class="form-group" id="image-list" th:if="${image ne null and image.size() > 0}">
									<label for="disabledinput" class="col-sm-2 control-label"  style="float: left ; margin-left: 1px">商品图片</label>
									<div th:each="i,istat:${image}" class="col-sm-8" th:id="'image-list'+${istat.count}"    style="margin-left: 16.65%; margin-top: 10px;" >
										<span class="image-num" th:text="${istat.count}">1</span> 
										<!-- 这里和商品规格类似 -->
										&nbsp;&nbsp;<img th:src="${i.url}" width="20px" height="20px;" />
										<input th:value="${i.id}" name="imgid" type="hidden" th:id="'imgid'+${i.id}" >
										<a th:if="${istat.count lt image.size()}" th:class="'image-list-reduce'+${istat.count}" href="javascript:void(0)" th:onclick="'reduceImageList('+${istat.count}+','+${i.id}+')'" style="background-image: url(images/reduce.svg); display: none;" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
										<a th:if="${istat.count lt image.size()}" th:class="'image-list-plus'+${istat.count}" href="javascript:void(0)" onclick="addImageList()" style="background-image: url(images/plus.svg); display: none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
										
										
										<a th:if="${istat.count eq image.size()}" th:class="'image-list-reduce'+${istat.count}" href="javascript:void(0)" th:onclick="'reduceImageList('+${istat.count}+','+${i.id}+')'" style="background-image: url(images/reduce.svg)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
										<a th:if="${istat.count eq image.size()}" th:class="'image-list-plus'+${istat.count}" href="javascript:void(0)" onclick="addImageList()" style="background-image: url(images/plus.svg);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
								
									</div>
								</div>
								<div class="form-group" id="image-list" th:if="${image eq null or image.size() == 0}">
									<label for="disabledinput" class="col-sm-2 control-label"  style="float: left ; margin-left: 1px">商品图片</label>
									<div class="col-sm-8" id="image-list1"    style="margin-left: 16.65%; margin-top: 10px;" >
										<span class="image-num" >1</span> 
										<!-- 这里和商品规格类似 -->
										&nbsp;&nbsp;<input type="file"  class="form-control  productSpecsImage" style="width: 30%; display: inline-block;" name="file" value="" required>
										<input value="" name="imgid" type="hidden" id="imageId" >
										
										<a class="image-list-reduce1" href="javascript:void(0)" onclick="reduceImageList(1,0)" style="background-image: url(images/reduce.svg)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
										<a class="image-list-plus1" href="javascript:void(0)" onclick="addImageList()" style="background-image: url(images/plus.svg);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
									</div>
								</div>
							
								<script th:inline="javascript">
								
									
								
									var imageNum = 1;// 添加图片上传input
									var image = [[${image}]]
									
									
									console.log(image);
									if(image != null && image.length>0 ){
										imageNum = image.length;
									}
									function addImageList(){
										$('#image-list'+imageNum+' .image-list-plus'+imageNum).css('display','none');
										$('#image-list'+imageNum+' .image-list-reduce'+imageNum).css('display','none');
										imageNum = imageNum + 1;
										var imageContent = '<div class="col-sm-8" style="margin-left: 16.65%; margin-top: 10px;" id="image-list'+imageNum+'">'
													+'<span class="image-num">'+imageNum+'</span>. '
													+'<input type="file"  class="form-control  productSpecsImage" style="width: 30%; display: inline-block;" name="file" value="" required>&nbsp;&nbsp;'
													+'<a class="image-list-reduce'+imageNum+'" href="javascript:void(0)" onclick="reduceImageList('+imageNum+')" style="background-image: url(images/reduce.svg)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'
													+'<a class="image-list-plus'+imageNum+'" href="javascript:void(0)" onclick="addImageList()" style="background-image: url(images/plus.svg);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'
													+'</div>';
										$('#image-list').append(imageContent);
									}
									
									// 删除图片上传input
									function reduceImageList(num,id){
										if(id != null && id != 0 && id!='undefined'){
											$.post("deleteimg.do",{id:id},function(data){
												if(data==0){
													$('#tipContent').html(data.message);
						    	                	$("#asdf").trigger('click');
												}
											});
										}
										
										if(num == 1){
											$('#image-list'+num).remove();
											var imageContent = '<div class="col-sm-8" style="margin-left: 16.65%; margin-top: 10px;" id="image-list'+imageNum+'">'
												+'<span class="image-num">'+imageNum+'</span> '
												+'<input type="file"  class="form-control  productSpecsImage" style="width: 30%; display: inline-block;" name="file" value="" required>&nbsp;&nbsp;'
												+'<a class="image-list-reduce'+imageNum+'" href="javascript:void(0)" onclick="reduceImageList('+imageNum+')" style="background-image: url(images/reduce.svg)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'
												+'<a class="image-list-plus'+imageNum+'" href="javascript:void(0)" onclick="addImageList()" style="background-image: url(images/plus.svg);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'
												+'</div>';
											$('#image-list').append(imageContent);
											return;
											/* var imageListContent = $('#image-list'+num+' input').val();
											
											if(imageListContent != null || imageListContent != ''){
												$('#image-list'+num+' input').val('');
												return;
											}else{
												return;
											} */
										}
										$('#image-list'+num).remove();
										imageNum --;
										$('#image-list'+imageNum+' .image-list-plus'+imageNum).css('display','inline');
										$('#image-list'+imageNum+' .image-list-reduce'+imageNum).css('display','inline');
									}
								</script>
								<div class="form-group">
									<label for="disabledinput" class="col-sm-2 control-label">商品描述</label>
									<div class="col-sm-8">
										<textarea id="description" name="description" style="height: 350px;"   required="required"></textarea>
										<script th:inline="javascript">
										var product = [[${product}]]
										var obj =CKEDITOR.replace('description');
										if(product != null){
											console.log(product)
											obj.setData(product.descriptioin);
										}
										
										</script>
										<script>
											//修改时用
									$(function(){
											$(".form-horizontal").submit(function(){     // 提交表单的id
												var options ={
									        			dataType: 'json',
									        			success: function(data){
									        				if(data.sucess==0){
									    	                	$('#tipContent').html(data.message);
									    	                	$("#asdf").trigger('click');
									    	                }else if(data.sucess==1){
									    	                	toProductFind();
									    	                }
									        			}
									        	};
												for(instance in CKEDITOR.instances)
												CKEDITOR.instances[instance].updateElement();
												$('#ModifyProduct').ajaxSubmit(options);
										        return false;   //防止表单自动提交
										    });
										});
										</script>
									</div>
								</div>
								<button  th:if="${splist!=null}" href="javascript:void(0)"   style="margin-left: 74.5%; font-size: x-large;">
									修改商品
								</button>
							</form>
						</div>
					</div>
				</div>
			</div>
				<!-- 消息提示框 -->
			<div class="col-md-4 modal-grids">
			<button type="button" id="asdf" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm" style="display: none;">Small modal</button>
				<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
					<div class="modal-dialog modal-sm">
						<div class="modal-content"> 
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
								<h4 class="modal-title" id="mySmallModalLabel">温馨提示</h4> 
							</div> 
							<div class="modal-body" id="tipContent"> Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
							</div>
						</div>
					</div>
				</div>
			</div>
		<!-- //消息提示框 -->
			<!--footer-->
			<!--<div class="footer">
		   <p>Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
		</div>-->
			<!--//footer-->
		</div>
		<!-- Classie -->
		<script src="js/classie.js"></script>
		<script type="text/javascript">
			var specsNum = 1;
			var imageNum = 1;
			
			function addImageList(){
				$('#image-list'+imageNum+' .image-list-plus'+imageNum).hide();
				$('#image-list'+imageNum+' .image-list-reduce'+imageNum).css('display','none');
				imageNum = imageNum + 1;
				var imageContent = '<div class="col-sm-8" style="margin-left: 16.65%; margin-top: 10px;" id="image-list'+imageNum+'">'
							+'<span class="image-num">'+imageNum+'</span>. '
							+'<input type="file"  class="form-control" style="width: 30%; display: inline-block;" name="file" value="" required>&nbsp;&nbsp;'
							+'<input th:value="${i.id}" name="imgid" style="display: none"  id="imgid">'
							+'<a class="image-list-reduce'+imageNum+'" href="javascript:void(0)" onclick="reduceImageList('+imageNum+')" style="background-image: url(images/reduce.svg)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'
							+'<a class="image-list-plus'+imageNum+'" href="javascript:void(0)" onclick="addImageList()" style="background-image: url(images/plus.svg);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'
							+'</div>';
				$('#image-list').append(imageContent);
			}
			
			function reduceImageList(num){
				if(num == 1){
					var imageListContent = $('#image-list'+num+' input').val();
					
					if(imageListContent != null || imageListContent != ''){
						$('#image-list'+num+' input').val('');
						return;
					}else{
						return;
					}
				}
				$('#image-list'+num).remove();
				imageNum --;
				$('#image-list'+imageNum+' .image-list-plus'+imageNum).css('display','inline');
				$('#image-list'+imageNum+' .image-list-reduce'+imageNum).css('display','inline');
			}
			
			function addSpecsList(){
				
				$('#specs-list'+specsNum+' .specs-list-plus'+specsNum).css('display','none');
				$('#specs-list'+specsNum+' .specs-list-reduce'+specsNum).css('display','none');
				specsNum = specsNum + 1;
				var specsContent = '<div class="col-sm-8" style="margin-left: 16.65%; margin-top: 10px;" id="specs-list'+specsNum+'">'
							+'<span class="specs-num">'+specsNum+'</span> '
							+'<input type="text" class="form-control" style="width: 20%; display: inline-block;                         " name="listSpecs" placeholder="商品规格" value="" required>&nbsp;&nbsp;&nbsp;'
							+'<input type="number" class="form-control" style="width: 15%; display: inline-block;						" name="listNum" placeholder="数量" value="" required>&nbsp;&nbsp;&nbsp;'
							+'<input type="number" min="0.00" step="0.01" class="form-control" style="width: 15%; display: inline-block;" name="listPrice" placeholder="价格" value="" required>&nbsp;'
							+'<a class="specs-list-reduce'+specsNum+'" href="javascript:void(0)" onclick="reduceSpecsList('+specsNum+')" style="background-image: url(images/reduce.svg)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'
							+'<a class="specs-list-plus'+specsNum+'" href="javascript:void(0)" onclick="addSpecsList()" style="background-image: url(images/plus.svg);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'
							+'</div>';
				$('#specs-list').append(specsContent);
			}
			
			function reduceSpecsList(num){
				if(num == 1){
					var specsListContent = $('#specs-list'+num+' input').val();
					
					if(specsListContent != null || specsListContent != ''){
						$('#specs-list'+num+' input').val('');
						return;
					}else{
						return;
					}
				}
				$('#specs-list'+num).remove();
				specsNum --;
				$('#specs-list'+specsNum+' .specs-list-plus'+specsNum).css('display','inline');
				$('#specs-list'+specsNum+' .specs-list-reduce'+specsNum).css('display','inline');
			}
		</script>
		<script>
			var menuLeft = document.getElementById('cbp-spmenu-s1'),
				showLeftPush = document.getElementById('showLeftPush'),
				body = document.body;

			showLeftPush.onclick = function() {
				classie.toggle(this, 'active');
				classie.toggle(body, 'cbp-spmenu-push-toright');
				classie.toggle(menuLeft, 'cbp-spmenu-open');
				disableOther('showLeftPush');
			};

			function disableOther(button) {
				if(button !== 'showLeftPush') {
					classie.toggle(showLeftPush, 'disabled');
				}
			}
		</script>
		<!--scrolling js-->
		<script src="js/jquery.nicescroll.js"></script>
		<script src="js/scripts.js"></script>
		<!--//scrolling js-->
		<!-- Bootstrap Core JavaScript -->
		<script src="js/bootstrap.js">
		</script>
	</body>

</html>